<script setup>

import {computed, ref} from "vue";
import {useRouter} from "vue-router";
import {post} from "@/util/request.js";

const couponTemplate = {
  available: true,
  condition: '',
  reason: '',
  value: '',
  name: '折扣',
  startAt: 1489104000, // 开始时间
  endAt: 1514592000,  // 结束时间
  description: '利民优惠券', // 优惠券的详细描述
};

// 假设我们有多种类型的优惠券
const coupons = ref([
  {...couponTemplate, name: '新用户专享', value: 356,condition: '无条件',valueDesc: '3.56',unitDesc: '元'},
  {...couponTemplate, name: '买就送券',value:530, condition: '限一单',valueDesc: '5.3',unitDesc: '元'},
  {...couponTemplate, name: '生日特惠', value: 603, condition: '生日当天可用',valueDesc: '6.03',unitDesc: '元',available: false}, // 已失效的优惠券
  // 可以继续添加更多优惠券实例
  {...couponTemplate, name: '老用户专享', value: 222,condition: '买满五单送券',valueDesc: '2.22',unitDesc: '元'},
  {...couponTemplate, name: '快乐券',value:103, condition: '一天限一次',valueDesc: '1.03',unitDesc: '元'},
  {...couponTemplate, name: '生日特惠', value: 511,condition: '生日当天可用',valueDesc: '5.11',unitDesc: '元' ,available: true},

  {...couponTemplate, name: '限书籍类商品使用', value: 423,condition: '购买书籍相关',valueDesc: '4.23',unitDesc: '元'},
  {...couponTemplate, name: '知识券', value:213,condition: '第一次购买',valueDesc: '2.13',unitDesc: '元'},
  {...couponTemplate, name: '读书日特惠', value: 863, condition: '读书日可用',available: true,valueDesc: '8.63',unitDesc: '元'},

  {...couponTemplate, name: '无门槛', value: 183,condition: '无条件',valueDesc: '1.83',unitDesc: '元'},
  {...couponTemplate, name: '尝鲜券',value:402, condition: '首单尝鲜',valueDesc: '4.02',unitDesc: '元'},
  {...couponTemplate, name: '福利特惠', value: 504, condition: '不定时',available: true,valueDesc: '5.04',unitDesc: '元'},

  {...couponTemplate, name: '新品优惠券', value: 763,condition: '新物品',valueDesc: '7.63',unitDesc: '元'},
  {...couponTemplate, name: '折扣券', value:823,condition: '具体购买物品抵扣',valueDesc: '8.23',unitDesc: '元'},
  {...couponTemplate, name: '新物特惠', value: 219, condition: '购买新品',available: false,valueDesc: '2.19',unitDesc: '元'}, // 已失效的优惠券


]);

const showList = ref(false);
const chosenCoupon = ref(null);
const searchText = ref('');

// 筛选出有效且名称包含搜索关键词的优惠券
const filteredCoupons = computed(() =>
    coupons.value.filter(c => c.available && c.name.includes(searchText.value))
);

const onChange = (index) => {
  chosenCoupon.value = index === chosenCoupon.value ? null : index;
  showList.value = false;
};

const onExchange = (code) => {
  // 实际兑换逻辑应调用后端接口
  alert(`兑换优惠券成功，券码: ${code}`);
};

const sortCoupons = (by) => {
  // 简单示例，仅按名称或价值排序
  const sorted = [...coupons.value].sort((a, b) =>
      by === 'name' ? a.name.localeCompare(b.name) : a.value - b.value
  );
  coupons.value = sorted;
}


const router=useRouter(); // 设置router

// 跳转界面的
const onSave = () => {
  // 使用useRouter钩子来访问路由实例
  router.push('/wallet');
};

</script>

<template>

  <!-- 搜索框 -->
  <van-search
      v-model="searchText"
      placeholder="搜索优惠券名称"
      show-action
      @search="onChange"
  />

  <!-- 排序按钮组 -->
  <van-row justify="space-around" style="margin: 16px 0;">
    <van-col span="8" @click="sortCoupons('name')">
      <van-button size="small">按名称排序</van-button>
    </van-col>
    <van-col span="8" @click="sortCoupons('value')">
      <van-button size="small">按价值排序</van-button>
    </van-col>
  </van-row>

  <!-- 优惠券单元格 -->
  <van-coupon-cell
      :coupons="filteredCoupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
  />

  <!-- 优惠券列表弹出层 -->
  <van-popup
      v-model:show="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
  >
    <van-coupon-list
        :coupons="filteredCoupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="coupons.filter(c => !c.available)"
        @change="onChange"
        @exchange="onExchange"
    />
  </van-popup>

  <div class="action-buttons">
    <van-button type="primary" round block color="#FF000080" @click="onSave">submit</van-button>
  </div>

</template>

<style scoped>

</style>